<template>
  <div>
    <component :is="componentId"></component>
    <!-- <component :is="temp1"></component> -->
    <button @click="btn">temp</button>
    <div class="box1">
      <div style="height: 1000px;"></div>
    </div>
    <div class="box2">
      <div style="height: 1000px;"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'temp',
  data() {
    return {
      componentId: {
        template: `<div>niHao</div>`
      }
    }
  },
  methods: {
    btn() {
      this.componentId = {
        template: `<span>78456</span>`
      }
    }
  }
  // mounted() {
  //   vue.component('temp1', {
  //     template: `<span>78456</span>`
  //   })
  // },
}
</script>
<style lang="scss" scoped>

</style>
<style lang="scss">
::-webkit-scrollbar{
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 20px;
}
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  border-radius: 10px;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44,rgb(60,186,146)),color-stop(0.72,rgb(253,187,45)),color-stop(0.86,rgb(253,187,45)));
  transition: 0.3s ease-in-out;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border: 5px solid green;
}
.box1,.box2{
  border: 1px solid #333;
  margin-bottom: 10px;
  height: 200px;
  overflow: auto;
  box-sizing: border-box;
}
.box1{
  &::-webkit-scrollbar{
    width: 50px;
    height: 100px;
    background: red;
    border-radius: 20px;
  }
  &::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    border-radius: 10px;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44,rgb(60,186,146)),color-stop(0.72,rgb(253,187,45)),color-stop(0.86,rgb(253,187,45)));
    transition: 0.3s ease-in-out;
  }
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border: 5px solid green;
  }
}
.box2{
  &::-webkit-scrollbar{
    width: 10px;
    height: 100px;
    background: red;
    border-radius: 20px;
  }
  &::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    border-radius: 10px;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44,rgb(60,186,146)),color-stop(0.72,rgb(253,187,45)),color-stop(0.86,rgb(253,187,45)));
    transition: 0.3s ease-in-out;
  }
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border: 5px solid green;
  }
}
</style>
